<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>layui1</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <link rel="stylesheet" href="../css/common.css">
    <style>
        .container {
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .header {
            height: 60px;
            background-color: #393D49;
        }

        .header .logo {
            font-size: 30px;
            color: #ffffff;
            padding: 20px;
        }

        .header .nav {
            padding-right: 20px;
        }

        .content {
            flex: 1;
        }

        .content .left {
            width: 200px;
            background-color: #393D49;
        }

        .content .right {
            padding-left: 10px;
            padding-top: 10px;
            flex: 1;
        }

        .layui-form {
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="header flex j-s a-c">
            <div class="logo">LOGO</div>
            <div class="nav">
                <ul class="layui-nav" lay-filter="">
                    <li class="layui-nav-item layui-this"><a href="javascript:void(0)">最新活动</a></li>
                    <li class="layui-nav-item"><a href="javascript:void(0)">产品</a></li>
                    <li class="layui-nav-item"><a href="javascript:void(0)">大数据</a></li>
                    <li class="layui-nav-item">
                        <a href="javascript:;">解决方案</a>
                        <dl class="layui-nav-child">
                            <!-- 二级菜单 -->
                            <dd><a href="javascript:void(0)">移动模块</a></dd>
                            <dd><a href="javascript:void(0)">后台模版</a></dd>
                            <dd><a href="javascript:void(0)">电商平台</a></dd>
                        </dl>
                    </li>
                </ul>
            </div>
        </div>
        <div class="content flex">
            <div class="left">
                <ul class="layui-nav layui-nav-tree" lay-filter="test">
                    <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
                    <li class="layui-nav-item layui-nav-itemed">
                        <a href="javascript:;">学生管理</a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;">添加学生</a></dd>
                            <dd><a href="javascript:;">查询学生</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;">课程管理</a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;">添加课程</a></dd>
                            <dd><a href="javascript:;">查询课程</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;">成绩管理</a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;">添加成绩</a></dd>
                            <dd><a href="javascript:;">查询成绩</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item"><a href="">产品</a></li>
                    <li class="layui-nav-item"><a href="">大数据</a></li>
                </ul>
            </div>
            <div class="right">
                <span class="layui-breadcrumb">
                    <a href="">首页</a>
                    <a href="">国际新闻</a>
                    <a href="">亚太地区</a>
                    <a><cite>正文</cite></a>
                </span>
                <form class="layui-form" action="">
                    <div class="layui-form-item">
                        <label class="layui-form-label">输入标题：</label>
                        <div class="layui-input-inline">
                            <input type="text" name="title" required lay-verify="required" placeholder="请输入标题"
                                autocomplete="off" class="layui-input">
                        </div>
                        <button type="button" class="layui-btn">搜索</button>
                    </div>
                </form>
                <table class="layui-table">
                    <colgroup>
                        <col width="100">
                        <col>
                        <col width="150">
                        <col width="150">
                        <col width="200">
                    </colgroup>
                    <thead>
                        <tr>
                            <th>编号</th>
                            <th>名称</th>
                            <th>单价</th>
                            <th>数量</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="tbody">
                        <script id="temp" type="text/html">
                        {{each $data item}}
                        <tr>
                            <td>{{item.id}}</td>
                            <td>{{item.name}}</td>
                            <td>{{item.price}}</td>
                            <td>{{item.count}}</td>
                            <td>
                                <button type="button" class="layui-btn-sm layui-btn layui-btn-warm">修改</button>
                                <button type="button" class="layui-btn-sm layui-btn layui-btn-danger">删除</button>
                            </td>
                        </tr>
                        {{/each}}
                        </script>
                    </tbody>
                </table>
                <!-- 显示分页信息的div -->
                <div id="pages"></div>
            </div>
        </div>
    </div>
    <script src="./layui/layui.js"></script>
    <script src="./js/artTemplate.js"></script>
    <script>
        //注意：导航 依赖 element 模块，否则无法进行功能性操作
        //laypage 是分页模块
        layui.use(['element', 'laypage', 'jquery'], function () {
            var element = layui.element;
            var laypage = layui.laypage;
            var $ = layui.jquery

            //执行一个laypage实例
            laypage.render({
                elem: 'pages',  //注意，这里的 pages 是 ID，不用加 # 号
                count: 100,       //数据总数，从服务端得到
                limit:10,        //每页显示的条数，默认是10
            });

            //请求数据，显示表格
            $.get('./data/goods.json',res=>{
                $('#tbody').html(template('temp',res))
            })
        });

    </script>
</body>

</html>